class ZToast {
  #id = "z-toast-container";
  constructor() {
    let toastContainer = document.querySelector(`#${this.#id}`);
    if (!toastContainer) {
      toastContainer = document.createElement("div");
      toastContainer.id = this.#id;
      document.body.appendChild(toastContainer);
    }
    this.toastContainer = toastContainer as HTMLElement;
  }
  private toastContainer: HTMLElement;
  public show(
    message: string,
    type: "success" | "error" | "warning" = "success"
  ) {
    const toast = document.createElement("div");
    toast.classList.add("z-toast");
    toast.classList.add(type);
    toast.textContent = message;
    this.toastContainer.appendChild(toast);

    // occur
    toast.classList.add("slide-in");
    toast.addEventListener("animationend", () => {
      toast.classList.remove("slide-in");
    });

    setTimeout(() => {
      // vanish
      toast.classList.add("slide-out");
      toast.addEventListener("animationend", () => {
        toast.remove();
      });
    }, 3000);
  }
  public success(message: string) {
    this.show(message, "success");
  }
  public error(message: string) {
    this.show(message, "error");
  }
  public warning(message: string) {
    this.show(message, "warning");
  }
}
const toast = new ZToast();

export { toast };
